import styles from "./index.less"
import {BorderBox8} from '@jiaminghi/data-view-react'
import {useEffect, useRef, useState} from "react"
import * as echarts from "echarts";
const Safe = () => {
    const getLastWeekDates = () => {
        const today = new Date();
        const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
        const dates = [];
        for (let i = 0; i < 7; i++) {
            const date = new Date(lastWeek.getTime() + i * 24 * 60 * 60 * 1000);
            dates.push(date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }));
        }
        return dates;
    };
    const [level1,setLevel1]=useState(28)
    const [level2,setLevel2]=useState(35)
    const [level3,setLevel3]=useState(23)
    const [level4,setLevel4]=useState(57)
    const AttRef = useRef(null)
    const [safeLine, setSafeLine] = useState(getLastWeekDates())
    const [newData,setNewData]=useState(()=>{
        let data=[]
        for(let i=0;i<7;i++){
            data.push(Math.ceil(Math.random()*20+9))
        }
        return data
    })
    const [oldData,setOldData]=useState(()=>{
        let data=[]
        for(let i=0;i<7;i++){
            data.push(Math.ceil(Math.random()*25+14))
        }
        return data
    })
    useEffect(() => {
        const myChart = echarts.init(AttRef.current);
        let option;
        option = {
            xAxis: {
                type: 'category',
                data: safeLine,
                boundaryGap: false,
                axisLine: {
                    show: false
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    interval: 0,//使x轴文字显示全,
                    margin: 15
                },
                axisTick: {
                    show: false
                }
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '',
                borderColor:"transparent",
                textStyle:{
                    color:"#FFFFFF"
                },
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
            },
            yAxis: {
                type: 'value',
                axisLabel:{
                    show:false
                },
                splitLine: { //多条横线
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.3)",
                        type: [10, 10],
                        dashOffset: 5
                    }

                },
            },
            grid: {
                left: "6%",
                top: "10%",
                right: "6%",
                bottom: "32px"
            },
            series: [
                {
                    name: '已修复',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 1,
                        color:'rgba(115, 247, 249, 1)'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: newData,
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#73F7F9',
                        color: '#73F8FA',
                    }
                },
                {
                    name: '已忽略',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 1,
                        color:'#E4FD21'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#E4FD21',
                        color: '#E4FD21',
                    },
                    data: oldData
                },

            ]
        };

        option && myChart.setOption(option);
        window.addEventListener('resize',()=>{
            myChart.resize()
        })
    }, [])
    useEffect(()=>{
        setInterval(()=>{
                setLevel1(Math.ceil(Math.random()*2+27))
        },60000)
        setInterval(()=>{
            setLevel2(Math.ceil(Math.random()*12+34))
        },62000)
        setInterval(()=>{
            setLevel3(Math.ceil(Math.random()*25+23))
        },63000)
        setInterval(()=>{
            setLevel4(Math.ceil(Math.random()*26+56))
        },64000)
    },[])
    return (

        <div className={styles.container}>
            <BorderBox8 reverse="{true}" dur={6}>
                <div className={styles.content}>
                    <div className={styles.top}>
                        <div className={styles.ChTitle}>安全漏洞</div>
                        <div className={styles.EnTitle}>// Vulnerability rick</div>
                    </div>
                    <div className={styles.typeList}>
                        <div className={styles.type1}>
                            <div className={styles.number}>{level1}</div>
                            <div className={styles.text}>严重</div>
                        </div>
                        <div className={styles.line}></div>
                        <div className={styles.type2}>
                            <div className={styles.number}>{level2}</div>
                            <div className={styles.text}>高危</div>
                        </div>
                        <div className={styles.line}></div>
                        <div className={styles.type3}>
                            <div className={styles.number}>{level3}</div>
                            <div className={styles.text}>中危</div>
                        </div>
                        <div className={styles.line}></div>
                        <div className={styles.type4}>
                            <div className={styles.number}>{level4}</div>
                            <div className={styles.text}>低危</div>
                        </div>
                    </div>
                    <div className={styles.dcf} ref={AttRef}></div>
                </div>
            </BorderBox8>
        </div>


    )
}
export default Safe